<template>
  <div>
    <div class="title">
      <span class="line"></span>
      <span
        ><i style="font-size: 0.1rem" class="iconfont icon-tupian"></i>
        {{ this.sendData.label }}</span
      >
    </div>
    <el-table ref="tableRef" :data="tableData" border height="700" class="newappclass" style="width: 100%;overflow: auto;">
      <el-table-column
        v-for="(key, index) in columnKeys"
        :key="index"
        :label="$t(`newapp.${key}`)"
        :prop="key" 
      >
        <template v-slot:default="scope">
          <span v-if="key === 'is_deleted' || key === 'deleted'">{{scope.row[key] == 0?"--":"删除"}}</span>
          <span v-else-if="key === 'createTime' || key === 'deleteTime'
           || key === 'create_time' || key === 'recycleTime' || key === 'updateTime' || key === 'startTime' || key === 'stopTime' || key === 'startDate'
           || key === 'record_time'|| key === 'update_time' || key === 'timestamp' || key === 'endTime'
           ||key === 'startRepeatDate' || key === 'startRepeatDate' || key === 'operate_time' || key === 'c_time'
           || key === 'note_create_time' || key === 'note_modify_time' || key === 'lastOprTime'
          ">{{formDate(scope.row[key])}}</span>
          <img v-else-if="key === 'avatar' || key ==='headImgUrl' || key === 'imgUrl' || key === 'weatherUrl'" :src="scope.row[key]" width="50" height="50" alt="">

          <span v-else-if="key === 'isLogin'">{{ scope.row[key] == 0? "未登录" : "已登录" }}</span>

          <span v-else-if="key === 'punch_done'">{{ scope.row[key] == 0? "未打卡" : "已打卡" }}</span>

          <span v-else-if="key === 'isAllDay'">{{ scope.row[key] == 0? "非全天" : "全天" }}</span>

          <span v-else-if="key === 'is_collect'">{{ scope.row[key] == 0? "正常" : "重要" }}</span>
          <span v-else-if="key === 'is_complete' || key === 'finishWork' || key ==='complete'">{{ scope.row[key] == 0? "未完成" : "已完成" }}</span>
          <span v-else-if="key === 'is_del'|| key ==='deleteFlag'">{{ scope.row[key] == 0? "未删除" : "已删除" }}</span>

          <span v-else-if="key === 'content' || key ==='cookie' || key ==='ACCESS_TOKEN' || key === 'description'" :title="scope.row[key]" :style="contentStyle(scope.row[key])">{{scope.row[key]}}</span>
          <span v-else>{{ scope.row[key] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="offset"
          :page-sizes="[20, 40, 60, 100]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { get2024NewApp } from "@/api/2024newApp/index";
import { parseTime } from '@/utils/index'
export default {
  name: "newApp20242",
  props: ["sendData"],
  methods: {
    formDate(date){
      return parseTime(date);
    },
    contentStyle(content) {
      return {
      height: '100px',
      overflow: 'auto', 
      display: 'block', 
      "overflow-y": 'auto',
      };
    },
    initData() {
      let data = {
        proof_num: this.sendData.proof_num,
        fatherKey: this.sendData.app_name,
        key: this.sendData.class,
        limit: this.limit,
        offset: this.offset,
      };
    get2024NewApp(data)
      .then((res) => {
        this.tableData = res.data;
        this.total = res.data[0].cnt;
      })
      .catch((err) => {});
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.offset = val;
      this.initData();
    }
  },
  watch: {
    "$store.state.account.newapp2": function () {
      this.offset = 1;
      this.initData();
    },
  },
  created() {
    // this.$refs.tableRef.scrollTop = 0;
    this.initData();
  },
  computed: {
    columnKeys() {
      const keys = Object.keys(this.tableData[0] || {});

      const excludedColumns = ['Status',"vip_endtime","vip_status","loginType","expireTime","elapsedRealtime","tagId","moveTodayTipDate","lunarStr","COMPLETED_TIME","imageJson","ut", 'cnt', "SYSTEM_TIME",'diaryBookId',"local_images","last_content","isInvite","list_id","parent_task_id","emailVerified"];

      return keys.filter(key => !excludedColumns.includes(key));
    },
  },
  data() {
    return {
      offset: 1,
      limit: 20,
      total:0,
      tableData: [],
    };
  },
};
</script>
<style scoped>
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 2px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
  
}
.line {
  width: 8px;
  height: 100%;
}
.line {
  width: 8px;
  height: 100%;
}
.block {
  text-align: center;
  margin-top: 10px;
}
.newappclass {
  height: 700px;
}
@media screen and (min-width: 2360px) {
  .newappclass {
    height: 1000px;
  }
}
</style>
